<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/resources/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/resources/css/bootstrap.min.css"/>
    <script src="/resources/js/jquery.min.js"></script>
    <script src="/resources/js/bootstrap.min.js"></script>
    <script src="/resources/layui/css/layui.css"></script>
    <script src="/resources/layui/layui.js"></script>
    <script src="/resources/js/vue.js"></script>
    <script src="/resources/js/bootstrap.js"></script>

</head>
<body>


<table id="demo" lay-filter="test"></table>
</body>
</html>

<script>
    layui.use(['table',"laytpl","layer","form"], function(){
        var table = layui.table;
        //第一个实例
        table.render({
            elem: '#demo'
            ,url: 'http://localhost:8888/hebao/list' //数据接口
            ,page: true //开启分页
            ,toolbar:"#toolbarDemo"
            ,cols: [[ //表头
                {field:'hello',type:'radio'}
                ,{field: 'id', title: '单号'}
                ,{field: 'chengshi', title: '城市'}
            ]]
        });
        table.on("toolbar(test)",function(obj){
            var zhi=obj.event;
            var bbb=table.checkStatus('demo');
            switch(zhi){
                case "chai":
                    var idstr="";
                    idstr=bbb.data[0].guanlian;
                    id=bbb.data[0].id;
                    $.get('http://localhost:8888/panku/chaibao',{idstr:idstr,id:id},d=>{
                        layui.layer.msg("拆包成功！");
                        table.reload('demo');
                    });
                    break;
            }
        })
    });
</script>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="chai"><i class="layui-icon layui-icon-add-circle"></i>拆包</button>
    </div>
</script>
